<template>
	<el-dialog title="新增用户" :visible.sync="addDialogData.showAddDialog" width="450px" @close="cancelForm">
		<el-form
			ref="model"
			:model="model"
			:rules="rules"
			:label-position="labelPosition"
			:label-width="formLabelWidth"
		>
			<el-form-item label="账号" prop="userNo">
				<el-input v-model="model.userNo"></el-input>
			</el-form-item>
			<el-form-item label="用户名" prop="userName">
				<el-input v-model="model.userName"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="userPwd">
				<el-input type="password" v-model="model.userPwd" autocomplete="off"></el-input>
			</el-form-item>
			
			<el-form-item label="角色" prop="userFkRole">
				<el-radio-group v-model="model.userFkRole">
					<el-radio v-for="item in roles"
					:key="item.roleId"
					:label="item.roleId"
					>{{item.roleName}}</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="cancelForm()">取 消</el-button>
			<el-button type="primary" @click="submitForm()">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
export default {
	name: "UserAdd",
	props: {
		addDialogData: {
			type: Object,
			default: {
				showAddDialog: false,
			},
		},
	},
	data: function () {
		return {
			// 弹出框设置项
			formLabelWidth: "80px",
			labelPosition: "right",
			// model
			model: {
				userNo:"",
				userName: "",
				userPwd: "",
				// 设置角色
				userFkRole:"",
			},
			rules: {
				userNo: [
					{
						required: true,
						message: "账号不能为空",
						trigger: ["blur", "change"],
					},
				],
				userName: [
					{
						required: true,
						message: "用户名不能为空",
						trigger: ["blur", "change"],
					},
				],
				userPwd: [
					{
						required: true,
						message: "密码不能为空",
						trigger: ["blur", "change"],
					},
				],
			},
			// 所有的角色
			roles: [],
		};
	},
	methods: {
		// 初始化所有角色列表
		initAllRoles: function () {
			var self = this;
			this.$Request
				.fetch("/user/roleList")
				.then((result) => {
					self.roles = result.data;
				})
				.catch((error) => {
					this.$message.error(error);
				});
		},
		// 取消按钮
		cancelForm: function () {
			this.addDialogData.showAddDialog = false;
		},
		// 提交按钮
		submitForm: function () {
			// 对 form 表单进行验证
			this.$refs["model"].validate((isValid) => {
				if (!isValid) {
					return;
				}
				
				//console.log(this.model);

				this.$Request
					.fetch_("/user/insertUser", "post", this.model)
					.then((result) => {
						if (result.status == this.$Request.OK_CODE) {
							this.$message.success(result.msg);
							this.$refs["model"].resetFields();
							// 关闭对话框，刷新表格数据
							// 将对话框状态 showAddDialog 发送给父组件，由父组件来完成
							this.$emit("emitAddDialogData", false);
						} else {
							this.$refs["model"].resetFields();
							this.$message.info(result.msg);
						}
					})
					.catch((error) => {
						this.$message.error(error);
					});
			});
		},
	},
	mounted() {
		this.initAllRoles();
	},
};
</script>
<style></style>
